<template>
	<view class="car_content">
		<!-- <view class="top_img">
			<view class="cus-back" :style="[{top:StatusBar + 'px'}]" @tap="BackPage()">
				<text class="lg text-white cuIcon-back"></text>
			</view>background: url('https://p6.itc.cn/images01/20201117/e1ca9c35b96c432eb5e47dd8a6a5ff70.jpeg') no-repeat center center / cover;
			<img src="/static/images/bgs/dd_mm.jpg" alt="">
		</view> -->
		<cu-custom :cuCustomTop="15" ref="cuCustom"
			:contentClass="'cu-custom-content-gradient-bg'"
			:bgImage="conf.bg_img"
			:backIcon="false"
			:mainInfo="conf"
		>
			<block slot="backText">
				<view @tap.native.stop="BackPage()">
					<text class="lg cuIcon-back"></text>
				</view>
			</block>
		</cu-custom>
		<view class="car_body">
			
			<view class="bg-white radius radius-lg flex margin-top-lg cps-item"
			v-for="(cpsItem,cpsIndex) in list" 
			:key="cpsIndex"
			:style="[{animation: 'show ' + ((cpsIndex+1)*0.2+1) + 's 1'}]"
			>
				<view class="list-left padding-sm">
					<view class="flex justify-start margin-bottom-sm align-center">
						<img class="img-icon margin-right-10" v-if="icon" :src="icon" alt="">
						<text class="font-title text-black text-lg margin-right-sm">{{cpsItem.title}}</text>
						<text class="cps-desc bg-red padding-left-sm padding-right-sm text-sm text-cut">{{cpsItem.desc}}</text>
					</view>
					<view>
						<img class="list-banner" :src="cpsItem.img" alt="">
					</view>
				</view>
				<view class="list-right bg-white text-center flex align-center justify-center">
					<button class="cu-btn round text-white" :style="{backgroundColor: cpsItem.btn_color || themeColor}"  @click="navTo(cpsItem)">{{cpsItem.btn_text}}</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='CopyModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{copyTitle}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{copyContent}}
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub solid-left" @tap="hideModal">关闭</view>
					<view class="action margin-0 flex-sub  solid-left text-green" @tap="doCopy">复制口令</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog cu-modal-img" style="width: unset;">
				<image :src="copyImg" class="copy-img" mode='widthFix' alt="" :show-menu-by-longpress="true">
				
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getModuleItemDetail } from "@/api/life.js";
	
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				option:{},
				conf:{},
				list:[],
				icon:'',
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.option = option;
			console.log(option);
			if(option.icon){
				this.icon = option.icon;
			}
		},
		onShow() {
			this.getConfig();
		},
		onPageScroll(e) {
			this.$refs.cuCustom.pageScroll(e);
		},
		methods: {
			getConfig(){
				var that = this;
				getModuleItemDetail({pid:this.option.pid,p_table_name:this.option.p_table_name}).then(ret => {
					that.conf = ret.data.list_main;
					that.list = ret.data.list_detail;
				}).catch(err => {
					console.log(err);
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		// background: #fff !important;
	}
	.list-left{
		width: 70%;
		border-radius: 10px;
		padding-bottom: 5px;
		.img-icon{
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
		}
		.list-banner{
			width: 100%;
			height: 200rpx;
			border-radius: 8px;
		}
		.cps-desc{
			border-radius: 10px;
			max-width: 45%;
		}
	}
	
	.cps-item:nth-child(1){
		margin-top: 0px;
	}
	.list-left:nth-child(1){
		background-color: rgba(251, 241, 228, 0.7);
	}
	.list-left:nth-child(2){
		background-color: rgba(251, 241, 228, 0.7);
	}
	.list-right{
		width: 30%;
	}
	
	.car_body{
		margin-top: -20px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		padding: 10px 30rpx;
		background-color: #f4f4f4;
	}
	.top_img{
		z-index: -999;
		position: relative;
		.cus-back{
			position: absolute;
			height: 40px;
			width: 40px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			line-height: 40px;
			z-index: 999;
		}
		img{
			height: 12rem;
			width: 100%;
			img{width: 100%;}
		}
	}
</style>
